<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入 css -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

    <!-- 引入 js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
</head>
<body>
    <div class="container">
        <nav class="sidebar">
            <h2>后台管理</h2>
            <ul>
                <li><a href="#" onclick="loadModule('dashboard')">仪表盘</a></li>
                <li><a href="blog.html">博客管理</a></li>
                <li><a href="#" onclick="loadModule('users')">用户管理</a></li>
                <li><a href="#" onclick="loadModule('settings')">系统设置</a></li>
                <li><a href="#" onclick="loadModule('reports')">报表统计</a></li>
            </ul>
        </nav>
        <main class="content" id="content">
            <div class="blog-header">
                <h1>博客管理</h1>
                <button class="create-btn" onclick="window.location.href='editor.html'">+ 创作</button>
            </div>
            
            <div class="blog-tabs">
                <button class="tab-btn active" onclick="showTab('all')">全部文章</button>
                <button class="tab-btn" onclick="showTab('drafts')">草稿箱</button>
                <button class="tab-btn" onclick="showTab('trash')">回收站</button>
            </div>
            
            <!-- 全部文章列表 -->
            <div id="all-articles" class="tab-content active">
                <div class="article-list">
                    <div class="article-item">
                        <h3>如何学习前端开发</h3>
                        <p class="article-meta">技术 | 2024-01-15 | 已发布</p>
                        <p class="article-excerpt">前端开发是一个不断发展的领域，需要持续学习新技术...</p>
                        <div class="article-actions">
                            <button onclick="editArticle(1)">编辑</button>
                            <button onclick="deleteArticle(1)">删除</button>
                        </div>
                    </div>
                    <div class="article-item">
                        <h3>我的旅行日记</h3>
                        <p class="article-meta">旅行 | 2024-01-10 | 已发布</p>
                        <p class="article-excerpt">这次旅行让我收获颇丰，见识了不同的风土人情...</p>
                        <div class="article-actions">
                            <button onclick="editArticle(2)">编辑</button>
                            <button onclick="deleteArticle(2)">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 草稿箱 -->
            <div id="drafts" class="tab-content">
                <div class="article-list">
                    <div class="article-item">
                        <h3>JavaScript 高级技巧</h3>
                        <p class="article-meta">技术 | 2024-01-12 | 草稿</p>
                        <p class="article-excerpt">本文将介绍一些JavaScript的高级使用技巧...</p>
                        <div class="article-actions">
                            <button onclick="editArticle(3)">继续编辑</button>
                            <button onclick="publishDraft(3)">发布</button>
                            <button onclick="deleteDraft(3)">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 回收站 -->
            <div id="trash" class="tab-content">
                <div class="article-list">
                    <div class="article-item deleted">
                        <h3>已删除的文章标题</h3>
                        <p class="article-meta">生活 | 2024-01-08 | 已删除</p>
                        <p class="article-excerpt">这是一篇已删除的文章内容预览...</p>
                        <div class="article-actions">
                            <button onclick="restoreArticle(4)">恢复</button>
                            <button onclick="permanentDelete(4)">永久删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 创作表单（默认隐藏） -->
            <div id="create-form" class="blog-form" style="display: none;">
                <h2>发布新博客</h2>
                <form id="blogForm">
                    <label for="title">标题:</label>
                    <input type="text" id="title" name="title" required>
                    
                    <label for="category">分类:</label>
                    <select id="category" name="category">
                        <option value="technology">技术</option>
                        <option value="life">生活</option>
                        <option value="travel">旅行</option>
                    </select>
                    
                    <label for="theme">主题:</label>
                    <input type="text" id="theme" name="theme" required>
                    
                    <label for="keywords">关键词 (逗号分隔):</label>
                    <input type="text" id="keywords" name="keywords" required>
                    
                    <label for="content">内容:</label>
                    <div id="toolbar-container"></div>
                    <div id="editor-container" style="height: 300px; border: 1px solid #ccc;"></div>
                    <textarea id="content" name="content" style="display: none;" required></textarea>
                    
                    <label>翻译为:</label>
                    <div class="language-options">
                        <input type="checkbox" id="en" name="language" value="en">
                        <label for="en">English</label>
                        <input type="checkbox" id="zh" name="language" value="zh">
                        <label for="zh">中文</label>
                        <input type="checkbox" id="ja" name="language" value="ja">
                        <label for="ja">日本語</label>
                        <input type="checkbox" id="es" name="language" value="es">
                        <label for="es">Español</label>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" onclick="saveDraft()">保存草稿</button>
                        <button type="button" onclick="submitBlog()">发布</button>
                        <button type="button" onclick="cancelCreate()">取消</button>
                    </div>
                </form>
            </div>
        </main>
    </div>
    <script src="script-new.js"></script>
</body>
</html>